<template>
  <view>
    <u-navbar title="详情" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />

    <view class="sticky z-4" id="container" :style="{ top: `${top}px` }">
      <u-tabs v-if="showTab" :bold="false" :current="tabsCurrent" :is-scroll="false" :list="list" active-color="#2D8CF0" bar-height="10"
        :bar-width="barWidth" duration="0" @change="change"></u-tabs>
      <u-line v-if="showTab" color="#CCCCCC" length="94%" margin="-5rpx 0 0 20rpx" />

      <view class="p-tb-20 p-lr-30 bg-fff">
        <view class="oh w-full">
          <text class="fz-36 font-bold color-333333">{{ params.staffName }}</text>
          <text class="color-CCCCCC fz-22 pl-20">驻点医院：{{ params.hospitalName }}</text>
        </view>
        <view class="fz-36 font-bold color-333333 mt-20">{{ dateShowFormat(params) }}工单总详情</view>
      </view>
    </view>

    <view class="m-lr-20">
      <view v-if="tabsCurrent === 0">
        <DetailData :queryParams="queryParams" ref="detailDataComponent"/>
      </view>
      <view v-if="tabsCurrent === 1">
        <OrderDetail :queryParams="queryParams" ref="orderDetailComponent"/>
      </view>
    </view>
  </view>
</template>

<script>
import DetailData from "./components/staff/detailData";
import OrderDetail from "./components/staff/orderDetail";

import getNavBarHeight from "@/mixins/getNavBarHeight";
import dateShowFormat from '@/mixins/dateShowFormat'

import {DIC} from "@/utils/dict"

export default {
  name: "StaffOrderDetail",
  components: { DetailData, OrderDetail },
  mixins: [getNavBarHeight , dateShowFormat],
  onLoad (option) {
    this.params = JSON.parse(decodeURIComponent(option.queryParams))
    if(this.params.unitType === DIC.dateType[3].value){
      this.tabsCurrent = 1
      this.showTab = false
    }else{
      this.tabsCurrent = 0
    }
  },

  data () {
    return {
      barWidth: 350,
      tabsCurrent: 2,
      list: [{ name: "详细数据" }, { name: "工单详情" }],
      showTab : true,
      dataList: [],
      params: {},
    }
  },
  computed: {
    queryParams () {
      return {
        staffId: this.params.staffId,
        hospitalId: this.params.hospitalId,
        companyId : this.params.companyId,
        year: this.params.year,
        month: this.params.month,
        week: this.params.week,
        day: this.params.day,
        unitType: this.params.unitType
      }
    },
  },
  methods: {
    //切换tab
    change (index) {
      this.tabsCurrent = index;
    },
  },
  onReachBottom () {
    if(this.tabsCurrent === 0){
      this.$refs.detailDataComponent.reachBottom()
    }else{
      this.$refs.orderDetailComponent.reachBottom()
    }
  }
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}
</style>
